import React, { useState } from 'react'
import { Tabs, Button, message } from 'antd'
import Info from './components/Info'
import HeroSkin from './components/HeroSkin'
import Introduce from './components/Introduce'
import Skill from './components/Skill'
import Equip from './components/Equip'
import AdminSkill from './components/AdminSkill'
import Relation from './components/Relation'
import { connect, history } from 'umi'
import { addHerosItem } from '@/api/hero'

const { TabPane } = Tabs;

type Props = {
    hero: any
}

function AddHero({ hero }: Props) {
    const [active, setActive] = useState("1")
    const submit = () => {
        addHerosItem(hero).then(res => {
            console.log(res)
            // history.push('/hero/list')
        })
    }
    return (
        <div className='p20'>
            <div className='context_card'>
                <Tabs activeKey={active}
                    onChange={(activeKey) => {
                        // if (Number(activeKey) > 1) {
                        //     if (hero.name.length > 0) {
                        //         setActive(activeKey)
                        //     } else {
                        //         setActive("1")
                        //         message.warning("请填写英雄名称")
                        //     }
                        // } else {
                        //     setActive(activeKey)
                        // }
                        setActive(activeKey)
                    }} defaultActiveKey="1" type="card">
                    <TabPane tab="基本信息" key="1">
                        <Info />
                    </TabPane>
                    <TabPane tab="英雄皮肤" key="2">
                        <HeroSkin/>
                    </TabPane>
                    <TabPane tab="介绍视频" key="3">
                        <Introduce/>
                    </TabPane>
                    <TabPane tab="出装推荐" key="4">
                        <Equip/>
                    </TabPane>
                    <TabPane tab="使用技巧" key="5">
                        <Skill/>
                    </TabPane>
                    <TabPane tab="技能管理" key="6">
                        <AdminSkill/>
                    </TabPane>
                    <TabPane tab="英雄关系" key="7">
                        <Relation/>
                    </TabPane>
                </Tabs>
            </div>
            <Button className='mt15'
                onClick={submit}
                type="primary">保存</Button>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    const { hero } = state
    return {
        hero
    }
}

export default connect(mapStateToProps)(AddHero)